<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试解析 - 智能学习平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --primary-dark: #3a0ca3;
            --secondary: #7209b7;
            --accent: #f72585;
            --success: #4cc9f0;
            --warning: #f9c74f;
            --danger: #f94144;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            color: var(--dark);
            line-height: 1.6;
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 头部样式 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 0 0 20px 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
        }

        .logo-icon {
            color: var(--primary);
            font-size: 2rem;
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .nav-link {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

        .nav-link:hover {
            color: var(--primary);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: var(--transition);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .header-buttons {
            display: flex;
            gap: 15px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95rem;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 14px rgba(67, 97, 238, 0.4);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.5);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
        }

        /* 页面标题 */
        .page-header {
            margin: 40px 0 30px;
            text-align: center;
        }

        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--dark);
        }

        .page-subtitle {
            font-size: 1.1rem;
            color: var(--gray);
            max-width: 600px;
            margin: 0 auto;
        }

        /* 考试信息卡片 */
        .exam-info-card {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            margin-bottom: 30px;
        }

        .exam-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .info-label {
            font-size: 0.9rem;
            color: var(--gray);
            font-weight: 500;
        }

        .info-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark);
        }

        /* 题目解析区域 */
        .questions-container {
            margin-bottom: 60px;
        }

        .question-item {
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: var(--card-shadow);
            margin-bottom: 25px;
            position: relative;
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .question-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--dark);
        }

        .question-meta {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
            color: var(--gray);
        }

        .question-content {
            margin-bottom: 25px;
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 12px;
            margin: 20px 0;
            font-family: 'Fira Code', monospace;
            overflow-x: auto;
        }

        /* 答案区域 */
        .answer-section {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 25px;
            margin-top: 25px;
        }

        .answer-header {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .answer-content {
            line-height: 1.6;
        }

        .correct-answer {
            color: var(--success);
            font-weight: 600;
            margin: 10px 0;
        }

        .explanation {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #dee2e6;
        }

        /* 选项样式 */
        .options-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin: 20px 0;
        }

        .option-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            transition: var(--transition);
        }

        .option-item.correct {
            border-color: var(--success);
            background: rgba(76, 201, 240, 0.1);
        }

        .option-item.incorrect {
            border-color: var(--danger);
            background: rgba(249, 65, 68, 0.1);
        }

        .option-marker {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: #f8f9fa;
            font-weight: 600;
            flex-shrink: 0;
        }

        .option-item.correct .option-marker {
            background: var(--success);
            color: white;
        }

        .option-item.incorrect .option-marker {
            background: var(--danger);
            color: white;
        }

        .option-text {
            flex: 1;
        }

        /* 导航菜单 */
        .questions-nav {
            position: sticky;
            top: 20px;
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            margin-bottom: 30px;
            height: fit-content;
        }

        .nav-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark);
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .question-number {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: #f8f9fa;
            color: var(--dark);
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }

        .question-number:hover {
            background: var(--primary-light);
            color: white;
        }

        .question-number.current {
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 10px rgba(67, 97, 238, 0.3);
        }

        .question-number.correct {
            background: rgba(76, 201, 240, 0.2);
            color: var(--success);
        }

        .question-number.incorrect {
            background: rgba(249, 65, 68, 0.2);
            color: var(--danger);
        }

        /* 操作按钮 */
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 40px;
        }

        /* 布局 */
        .content-layout {
            display: flex;
            gap: 30px;
            margin-bottom: 60px;
        }

        .main-content {
            flex: 1;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .content-layout {
                flex-direction: column;
            }

            .question-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 20px;
                padding: 15px;
            }

            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }

            .page-title {
                font-size: 2rem;
            }

            .question-header {
                flex-direction: column;
                gap: 15px;
            }

            .question-grid {
                grid-template-columns: repeat(5, 1fr);
            }
        }

        @media (max-width: 576px) {
            .header-buttons {
                flex-direction: column;
                width: 100%;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .question-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .action-buttons {
                flex-direction: column;
            }

            .exam-info-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <a href="index_2.html" class="logo">
                <i class="fas fa-brain logo-icon"></i>
                <span>智学平台</span>
            </a>

            <div class="nav-links">
                <a href="index_2.html" class="nav-link">首页</a>
                <a href="#" class="nav-link">课程</a>
                <a href="question_2.html" class="nav-link">题库</a>
                <a href="exam_2.html" class="nav-link">考试</a>
                <a href="#" class="nav-link">学习路径</a>
                <a href="#" class="nav-link">关于我们</a>
            </div>

            <div class="header-buttons">
                <button class="btn btn-outline">
                    <i class="fas fa-user"></i>
                    <span>登录</span>
                </button>
                <button class="btn btn-primary">
                    <i class="fas fa-user-plus"></i>
                    <span>注册</span>
                </button>
            </div>
        </div>

        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">C语言程序设计认证考试 - 题目解析</h1>
            <p class="page-subtitle">查看考试题目详细解析，巩固知识点，提升学习效果</p>
        </div>

        <!-- 考试信息 -->
        <div class="exam-info-card">
            <div class="exam-info-grid">
                <div class="info-item">
                    <span class="info-label">考试名称</span>
                    <span class="info-value">C语言程序设计认证考试</span>
                </div>
                <div class="info-item">
                    <span class="info-label">参加时间</span>
                    <span class="info-value">2023-12-10 14:00</span>
                </div>
                <div class="info-item">
                    <span class="info-label">得分</span>
                    <span class="info-value">82/100</span>
                </div>
                <div class="info-item">
                    <span class="info-label">答题用时</span>
                    <span class="info-value">01:25:36</span>
                </div>
            </div>
        </div>

        <!-- 内容布局 -->
        <div class="content-layout">
            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 题目1 -->
                <div class="question-item" id="q1">
                    <div class="question-header">
                        <h2 class="question-title">题目 #1</h2>
                        <div class="meta-item">
                            <i class="fas fa-star"></i>
                            <span>难度: 中等</span>
                        </div>
                    </div>

                    <div class="question-content">
                        <p>以下关于C语言指针的描述中，正确的是：</p>

                        <div class="code-block">
                            #include &lt;stdio.h&gt;

                            int main() {
                            int arr[5] = {1, 2, 3, 4, 5};
                            int *ptr = arr;
                            printf("%d", *(ptr + 2));
                            return 0;
                            }
                        </div>

                        <p>上述代码的输出结果是什么？</p>
                    </div>

                    <div class="options-list">
                        <div class="option-item">
                            <div class="option-marker">A</div>
                            <div class="option-text">1</div>
                        </div>
                        <div class="option-item">
                            <div class="option-marker">B</div>
                            <div class="option-text">2</div>
                        </div>
                        <div class="option-item correct">
                            <div class="option-marker">C</div>
                            <div class="option-text">3</div>
                        </div>
                        <div class="option-item">
                            <div class="option-marker">D</div>
                            <div class="option-text">4</div>
                        </div>
                    </div>

                    <div class="answer-section">
                        <div class="answer-header">
                            <i class="fas fa-lightbulb"></i>
                            <span>答案与解析</span>
                        </div>
                        <div class="answer-content">
                            <p class="correct-answer">正确答案: C. 3</p>
                            <div class="explanation">
                                <p><strong>解析：</strong>在C语言中，数组名代表数组首元素的地址。因此<code>int *ptr = arr</code>将ptr指向数组arr的第一个元素。<code>ptr + 2</code>表示指向数组的第三个元素（索引为2），<code>*(ptr + 2)</code>解引用获取该位置的值，即3。
                                </p>
                                <p>指针算术运算中，指针加n表示向前移动n个元素的位置，而不是n个字节。因为ptr是int指针，每个int占4字节，所以<code>ptr + 2</code>实际地址增加了8字节。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 题目2 -->
                <div class="question-item" id="q2">
                    <div class="question-header">
                        <h2 class="question-title">题目 #2</h2>
                        <div class="meta-item">
                            <i class="fas fa-star"></i>
                            <span>难度: 困难</span>
                        </div>
                    </div>

                    <div class="question-content">
                        <p>有以下结构体定义：</p>

                        <div class="code-block">
                            typedef struct {
                            char a;
                            int b;
                            short c;
                            double d;
                            } Example;
                        </div>

                        <p>在64位系统上，使用默认编译选项，sizeof(Example)的值是多少？</p>
                    </div>

                    <div class="options-list">
                        <div class="option-item">
                            <div class="option-marker">A</div>
                            <div class="option-text">15</div>
                        </div>
                        <div class="option-item">
                            <div class="option-marker">B</div>
                            <div class="option-text">16</div>
                        </div>
                        <div class="option-item correct">
                            <div class="option-marker">C</div>
                            <div class="option-text">24</div>
                        </div>
                        <div class="option-item">
                            <div class="option-marker">D</div>
                            <div class="option-text">32</div>
                        </div>
                    </div>

                    <div class="answer-section">
                        <div class="answer-header">
                            <i class="fas fa-lightbulb"></i>
                            <span>答案与解析</span>
                        </div>
                        <div class="answer-content">
                            <p class="correct-answer">正确答案: C. 24</p>
                            <div class="explanation">
                                <p><strong>解析：</strong>结构体内存对齐规则：</p>
                                <ol>
                                    <li>char a (1字节) - 偏移0</li>
                                    <li>int b (4字节) - 需要对齐到4的倍数，偏移4</li>
                                    <li>short c (2字节) - 偏移8</li>
                                    <li>double d (8字节) - 需要对齐到8的倍数，偏移16</li>
                                </ol>
                                <p>总大小需要是最大成员(double, 8字节)的倍数，所以是24字节。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 题目3 -->
                <div class="question-item" id="q3">
                    <div class="question-header">
                        <h2 class="question-title">题目 #3</h2>
                        <div class="meta-item">
                            <i class="fas fa-star"></i>
                            <span>难度: 中等</span>
                        </div>
                    </div>

                    <div class="question-content">
                        <p>有以下宏定义：</p>

                        <div class="code-block">
                            #define SQUARE(x) x * x
                        </div>

                        <p>当调用<code>SQUARE(2 + 3)</code>时，结果是多少？</p>
                    </div>

                    <div class="options-list">
                        <div class="option-item">
                            <div class="option-marker">A</div>
                            <div class="option-text">25</div>
                        </div>
                        <div class="option-item correct">
                            <div class="option-marker">B</div>
                            <div class="option-text">11</div>
                        </div>
                        <div class="option-item">
                            <div class="option-marker">C</div>
                            <div class="option-text">13</div>
                        </div>
                        <div class="option-item">
                            <div class="option-marker">D</div>
                            <div class="option-text">编译错误</div>
                        </div>
                    </div>

                    <div class="answer-section">
                        <div class="answer-header">
                            <i class="fas fa-lightbulb"></i>
                            <span>答案与解析</span>
                        </div>
                        <div class="answer-content">
                            <p class="correct-answer">正确答案: B. 11</p>
                            <div class="explanation">
                                <p><strong>解析：</strong>宏是简单的文本替换，<code>SQUARE(2 + 3)</code>会被替换为<code>2 + 3 * 2 + 3</code>。
                                </p>
                                <p>由于乘法优先级高于加法，实际计算为<code>2 + (3 * 2) + 3 = 2 + 6 + 3 = 11</code>。</p>
                                <p>正确的宏定义应该是<code>#define SQUARE(x) ((x) * (x))</code>，使用括号避免运算符优先级问题。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 题目导航 -->
            <div class="questions-nav">
                <h3 class="nav-title">题目导航</h3>
                <div class="question-grid">
                    <div class="question-number correct" onclick="scrollToQuestion('q1')">1</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q2')">2</div>
                    <div class="question-number incorrect" onclick="scrollToQuestion('q3')">3</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q4')">4</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q5')">5</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q6')">6</div>
                    <div class="question-number incorrect" onclick="scrollToQuestion('q7')">7</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q8')">8</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q9')">9</div>
                    <div class="question-number correct" onclick="scrollToQuestion('q10')">10</div>
                </div>

                <div class="info-item">
                    <span class="info-label">答题情况</span>
                    <span class="info-value">正确: 8题 | 错误: 2题</span>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="btn btn-outline">
                <i class="fas fa-download"></i>
                <span>导出解析</span>
            </button>
            <button class="btn btn-outline">
                <i class="fas fa-print"></i>
                <span>打印解析</span>
            </button>
            <button class="btn btn-primary" onclick="location.href='exam_2.html'">
                <i class="fas fa-redo"></i>
                <span>重新考试</span>
            </button>
        </div>
    </div>

    <script>
        // 简单的交互效果
        document.querySelectorAll('.btn').forEach(button => {
            button.addEventListener('click', function () {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });
        });

        // 滚动到指定题目
        function scrollToQuestion(questionId) {
            const element = document.getElementById(questionId);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'start' });

                // 添加高亮效果
                element.style.boxShadow = '0 0 0 2px var(--primary)';
                setTimeout(() => {
                    element.style.boxShadow = '';
                }, 2000);
            }
        }

        // 模拟更多题目
        for (let i = 4; i <= 10; i++) {
            const questionItem = document.createElement('div');
            questionItem.className = 'question-item';
            questionItem.id = `q${i}`;
            questionItem.innerHTML = `
                <div class="question-header">
                    <h2 class="question-title">题目 #${i}</h2>
                    <div class="meta-item">
                        <i class="fas fa-star"></i>
                        <span>难度: ${i % 2 === 0 ? '简单' : '中等'}</span>
                    </div>
                </div>
                
                <div class="question-content">
                    <p>这是第${i}道题目的内容描述。此处展示了题目的完整内容和要求，用户可以通过此页面查看题目的详细解析。</p>
                </div>

                <div class="options-list">
                    <div class="option-item ${i % 4 === 0 ? 'incorrect' : ''}">
                        <div class="option-marker">A</div>
                        <div class="option-text">选项A</div>
                    </div>
                    <div class="option-item ${i % 4 === 1 ? 'correct' : ''}">
                        <div class="option-marker">B</div>
                        <div class="option-text">选项B</div>
                    </div>
                    <div class="option-item ${i % 4 === 2 ? 'correct' : ''}">
                        <div class="option-marker">C</div>
                        <div class="option-text">选项C</div>
                    </div>
                    <div class="option-item ${i % 4 === 3 ? 'correct' : ''}">
                        <div class="option-marker">D</div>
                        <div class="option-text">选项D</div>
                    </div>
                </div>

                <div class="answer-section">
                    <div class="answer-header">
                        <i class="fas fa-lightbulb"></i>
                        <span>答案与解析</span>
                    </div>
                    <div class="answer-content">
                        <p class="correct-answer">正确答案: ${String.fromCharCode(65 + (i % 4))}</p>
                        <div class="explanation">
                            <p><strong>解析：</strong>这是第${i}道题目的详细解析内容。此处解释了为什么某个选项是正确的，以及其他选项为什么错误。解析内容详细且具有教育意义，帮助用户理解相关知识点。</p>
                        </div>
                    </div>
                </div>
            `;

            document.querySelector('.main-content').appendChild(questionItem);
        }
    </script>
</body>

</html>